<template>
  <d-dialog
    ref="dialog"
    :header="formData.isEdit ? '编辑菜单' : '新增菜单'"
    api="system/menu"
    v-model:data="formData"
    v-model:visible="visible"
    :rules="rules"
    :handleParams="handleParams"
    @success="getList"
  >
    <t-form-item label="上级菜单" name="parentId">
      <t-tree-select :data="menuList" v-model="formData.parentId" placeholder="请选择" />
    </t-form-item>
    <t-form-item label="菜单类型">
      <t-radio-group v-model="formData.menuType" :options="dict.menu_type_list"> </t-radio-group>
    </t-form-item>
    <template v-if="formData.menuType !== 'F'">
      <t-form-item label="菜单图标" name="icon">
        <t-select
          :filter="selectFilter"
          filterable
          clearable
          v-model="formData.icon"
          placeholder="请选择"
          :style="{ width: '400px' }"
          :popup-props="{ overlayInnerStyle: { width: '400px' } }"
        >
          <t-option
            v-for="item in iconList"
            :key="item.stem"
            :value="item.stem"
            class="inline-block text-20"
          >
            <div>
              <t-icon :name="item.stem" />
            </div>
          </t-option>
          <template #valueDisplay
            ><t-icon :name="formData.icon" class="mr-8px" />{{ formData.icon }}</template
          >
        </t-select>
      </t-form-item>
    </template>
    <t-form-item label="菜单名称" name="menuName">
      <t-input v-model="formData.menuName" placeholder="请输入菜单名称"></t-input>
    </t-form-item>
    <t-form-item label="排序" name="orderNum">
      <t-input-number
        v-model="formData.orderNum"
        placeholder="请输入"
        theme="column"
        style="width: 100%"
      ></t-input-number>
    </t-form-item>
    <template v-if="formData.menuType !== 'F'">
      <t-form-item label="是否外链">
        <t-radio-group v-model="formData.isFrame">
          <t-radio value="0">是</t-radio>
          <t-radio value="1">否</t-radio>
        </t-radio-group>
      </t-form-item>
      <t-form-item label="路由地址" name="path">
        <t-input v-model="formData.path" placeholder="请输入路由地址"></t-input>
      </t-form-item>
      <template v-if="formData.menuType == 'C'">
        <t-form-item label="组件路径" name="component">
          <t-input v-model="formData.component" placeholder="请输入组件路径"></t-input>
        </t-form-item>
      </template>
    </template>
    <template v-if="formData.menuType !== 'M'">
      <t-form-item label="权限标识">
        <t-input v-model="formData.perms" placeholder="请输入权限标识"></t-input>
      </t-form-item>
    </template>
    <template v-if="formData.menuType !== 'F'">
      <t-form-item label="显示状态">
        <t-radio-group v-model="formData.visible" :options="dict.dict_show_list" />
      </t-form-item>
      <t-form-item label="状态" name="status">
        <t-radio-group v-model="formData.status" :options="dict.dict_enable_list" />
      </t-form-item>
    </template>
  </d-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useDict } from '@/store/dict'
import { useSystem } from '@/store/system'
import { manifest } from 'tdesign-icons-vue-next'
import { merge, selectFilter } from '@common'
const dialog = ref(null)
const visible = ref(false)
const INIT_STATUS = {
  menuId: undefined,
  parentId: undefined,
  menuType: 'C',
  menuName: '',
  orderNum: '',
  isFrame: '1',
  path: '',
  isCache: '1',
  visible: '0',
  icon: '',
  status: '0',
  component: '',
  perms: ''
}
const formData = ref({
  ...INIT_STATUS
})
const iconList = ref(manifest)
const rules = {
  parentId: [{ required: true, message: '请选择上级菜单', trigger: 'blur' }],
  menuType: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
  menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  orderNum: [{ required: true, message: '请输入排序', trigger: 'blur' }],
  path: [{ required: false, message: '请输入菜单路径', trigger: 'blur' }]
}
const dict = useDict()
const system = useSystem()
const menuList = computed(() => {
  return [
    {
      label: '主类目',
      parentId: 0,
      value: 0,
      children: system.menuList
    }
  ]
})
defineEmits(['success'])
const handleParams = (params) => {
  return {
    ...params,
    icon: params.icon || '#'
  }
}
const getList = () => {
  system.getMenuListAll()
}
const show = (info = {}) => {
  const obj = merge({ ...INIT_STATUS, isEdit: !!info?.menuId }, info)
  formData.value = obj
  visible.value = true
}
getList()
defineExpose({ show })
</script>
